<template>
    <div>
        <van-cell-group>
            <van-cell title="头像" title-style="text-align:left; line-height:48px">
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #right-icon>
                    <van-image
                        round
                        width="3rem"
                        height="3rem"
                        :src='cheackImg'
                    />
                </template>
                
            </van-cell>
            <van-cell title="昵称" :value="userinfo.nic" title-style="text-align:left"/>
            <van-cell title="性别" :value="userinfo.sex" title-style="text-align:left"/>
            <van-cell title="姓名" is-link :value="cheackName" title-style="text-align:left"  @click="showName"/>
            <van-cell title="手机" is-link :value="cheackTel" title-style="text-align:left"  @click="showTel"/>
            <van-cell>
                <van-button round type="primary" block size="small" style="margin-bottom:10px" border="false" @click="reInfo">更新信息</van-button>
            </van-cell>
        </van-cell-group>
        <van-popup v-model="show1" style="height:200px;border-radius:10px" position="bottom">
            <tan1 @getName="chName" @quxiao="quxiao" :username="cheackName"></tan1>
        </van-popup>

        <van-popup v-model="show2" style="height:240px;border-radius:10px" position="bottom">
            <tan2 @getTel="chTel" @quxiao1="quxiao" :userTel="cheackTel"></tan2>
        </van-popup>
       
    </div>

</template>

<script>
    import tan1 from '../myinfor/tan1';
    import tan2 from '../myinfor/tan2';
    export default {
        name:"myinforList",
        data() {
            return {
                show1: false,
                show2: false,
                nameV: "",
                telV:"",
                userinfo:this.$store.state.curLoginUser
            }
        },
        created() {
            
        },
        computed: {
            cheackImg : function() {
                if(this.userinfo.img == null) {
                    return "https://img.yzcdn.cn/vant/cat.jpeg";
                }else {
                    return this.userinfo.img;
                }
            },
            cheackName : function() {
                if(this.userinfo.name == null){
                    // console.log(this.userinfo.name);
                    return '未绑定';
                } else {
                    return this.userinfo.name
                }
            },
            cheackTel : function() {
                if(this.userinfo.phone == null){
                    // console.log(this.userinfo.name);
                    return '未绑定';
                } else {
                    return this.userinfo.phone
                }
            }
        },
        methods: {
            showName: function() {
                this.show1 = true;
            },
            showTel: function() {
                this.show2 = true;
            },
            chName: function() {
                this.reInfo();
                this.show1 = false;
            },
            quxiao : function(isShow) {
                this.show1 = isShow
                this.show2 = isShow
            },
            chTel : function(tel,isShow){
                this.reInfo();
                this.show2 = false;
            },
            reInfo : function () {
                this.userinfo = this.$store.state.curLoginUser
            }
        },
        components: {
            "tan1":tan1,
            "tan2":tan2
        },
        
    }

</script>

<style scoped>
    /* van-popup {
        
    } */
</style>